<template>
        <div >
            <div id="echarTwo" ref="echarTwo"></div>
        </div>
      </template>
      <script>
      export default {
          name: 'echarTwo',
          mounted() {
              this.initCharts()
          },
        //   props: ['cageXData','cageYData'],
          methods: {
              initCharts() {
                  let that = this;
                  let chartTwo = that.$echarts.init(that.$refs.echarTwo);
                  // console.log("图标里");
                  // console.log(chartTwo);
                  let cageYData = [
                      "无蛋",
                      "将照蛋",
                      "照蛋",
                      "将抽蛋",
                      "抽蛋",
                      "将查仔",
                      "已查仔",
                  ];
                  let cageXData = [10, 20, 10, 30, 40, 50, 60];
                  let option = {
                      yAxis: {
                          name: '鸽笼状态',
                          type: "category",
                          data: that.cageYData,
                      },
                      xAxis: {
                          name: '数量/个',
                          type: "value",
                      },
                      title: {
                          text: "鸽笼状态数量：",
                          show: "true",
                          textStyle: {
                              fontWight: "normal",
                          },
                          left: 'center'
                      },
                      tooltip: {
                          trigger: "item", 
                          triggerOn: "mousemove", //什么事件可以触发提示框
                          formatter: "需{b}鸽笼数量为{c}"
                      },
                      series: [
                          {
                              name: "鸽笼状态", 
                              type: "bar", 
                              data: that.cageXData, 
                              color: "#5dadff",
                              // borderWidth: 5,
                          },
                      ],
                  };
      
                  chartTwo.setOption(option);
              }
          }
      }
      </script>
      <style lang="scss" scoped>
      #echarTwo {
          width: 580px;
          height: 350px;
      }
      </style>